<template>
  <div class="bg-gray-100 min-h-screen">
    <div class="container mx-auto py-8 px-4">
      <h1 class="text-3xl font-bold mb-8 text-center">创建虚拟人名片</h1>
      
      <form @submit.prevent="submitForm" class="max-w-2xl mx-auto space-y-6">
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <!-- 基本人设设定 -->
          <h2 class="text-xl font-semibold mb-4 flex items-center">
            <span class="text-2xl mr-2">🧠</span>
            一、基本人设设定
          </h2>
          
          <!-- 姓名/昵称 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">姓名 / 昵称</span>
              <span class="text-red-500">*</span>
            </label>
            <input 
              type="text" 
              v-model="form.basicInfo.name" 
              placeholder="例如：小智、学姐Ada、教练Mark" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
              required
            />
          </div>

          <!-- 年龄设定 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">年龄设定</span>
              <span class="text-red-500">*</span>
            </label>
            <input 
              type="text" 
              v-model="form.basicInfo.age" 
              placeholder="例如：18岁高中生、25岁研究生、30岁职场人" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
              required
            />
          </div>

          <!-- 性别/气质倾向 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">性别</span>
              <span class="text-red-500">*</span>
            </label>
            <div class="flex space-x-4 ml-4 mt-2 mb-4">
              <label class="flex items-center">
                <input 
                  type="radio" 
                  v-model="form.basicInfo.gender" 
                  value="male"
                  class="radio hidden"
                  required
                />
                <div 
                  class="w-8 h-8 rounded-full border-2 flex items-center justify-center cursor-pointer transition-colors duration-200"
                  :class="form.basicInfo.gender === 'male' ? 'border-blue-400 bg-blue-100' : 'border-gray-300'"
                >
                  <div 
                    class="w-4 h-4 rounded-full"
                    :class="form.basicInfo.gender === 'male' ? 'bg-blue-400' : 'bg-transparent'"
                  ></div>
                </div>
                <span class="ml-2">男</span>
              </label>
              <label class="flex items-center">
                <input 
                  type="radio" 
                  v-model="form.basicInfo.gender" 
                  value="female"
                  class="radio hidden"
                  required
                />
                <div 
                  class="w-8 h-8 rounded-full border-2 flex items-center justify-center cursor-pointer transition-colors duration-200"
                  :class="form.basicInfo.gender === 'female' ? 'border-pink-400 bg-pink-100' : 'border-gray-300'"
                >
                  <div 
                    class="w-4 h-4 rounded-full"
                    :class="form.basicInfo.gender === 'female' ? 'bg-pink-400' : 'bg-transparent'"
                  ></div>
                </div>
                <span class="ml-2">女</span>
              </label>
            </div>
          </div>

          <!-- 外貌/服饰风格 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">外貌 / 服饰风格</span>
            </label>
            <input 
              type="text" 
              v-model="form.basicInfo.appearance" 
              placeholder="例如：简约校园风、科技感未来装、温柔知性风" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 语言风格 -->
          <div class="form-control mb-6">
            <label class="label">
              <span class="label-text font-medium">语言风格</span>
            </label>
            <input 
              type="text" 
              v-model="form.basicInfo.voiceStyle" 
              placeholder="例如：青少年活泼、知性温柔、中性清晰、AI机械风" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 分割线 -->
          <div class="border-t-2 border-gray-300 my-8"></div>

          <!-- 性格/个性特征 -->
          <h2 class="text-xl font-semibold mb-4 flex items-center">
            <span class="text-2xl mr-2">🧠</span>
            二、性格 / 个性特征
          </h2>
          
          <!-- 性格类型 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">性格类型</span>
            </label>
            <input 
              type="text" 
              v-model="form.personality.type" 
              placeholder="例如：开朗、理性、冷静、幽默、宠溺型" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 表达风格 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">表达风格</span>
            </label>
            <input 
              type="text" 
              v-model="form.personality.expressionStyle" 
              placeholder="例如：干练直白、温柔鼓励、段子手式、学术型" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 对用户的态度 -->
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">对用户的态度</span>
            </label>
            <input 
              type="text" 
              v-model="form.personality.attitude" 
              placeholder="例如：像朋友、像老师、像哥哥姐姐、像教练" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 分割线 -->
          <div class="border-t-2 border-gray-300 my-8"></div>

          <!-- 兴趣爱好 / 背景故事 -->
          <h2 class="text-xl font-semibold mb-4 flex items-center">
            <span class="text-2xl mr-2">❤️</span>
            三、兴趣爱好 / 背景故事
          </h2>
          
          <!-- 兴趣爱好 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">兴趣爱好</span>
            </label>
            <input 
              type="text" 
              v-model="form.interests.hobbies" 
              placeholder="例如：篮球、科幻小说、咖啡、动漫、编程" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 背景故事 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">背景故事</span>
            </label>
            <input 
              type="text" 
              v-model="form.interests.background" 
              placeholder="例如：某高校AI专业学生、未来世界的AI研究员、穿越而来的智慧生物" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 座右铭 -->
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">座右铭</span>
            </label>
            <input 
              type="text" 
              v-model="form.interests.motto" 
              placeholder="例如：学习像升级打怪，越难越有趣！" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 分割线 -->
          <div class="border-t-2 border-gray-300 my-8"></div>

          <!-- 擅长领域 / 使用场景 -->
          <h2 class="text-xl font-semibold mb-4 flex items-center">
            <span class="text-2xl mr-2">📚</span>
            四、擅长领域 / 使用场景
          </h2>
          
          <!-- 擅长科目 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">擅长科目</span>
            </label>
            <input 
              type="text" 
              v-model="form.expertise.subjects" 
              placeholder="例如：数学、物理、语文写作" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 教学风格 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">教学风格</span>
            </label>
            <input 
              type="text" 
              v-model="form.expertise.teachingStyle" 
              placeholder="例如：Socratic引导式、刷题型、讲故事型" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 推荐题型倾向 -->
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">推荐题型倾向</span>
            </label>
            <input 
              type="text" 
              v-model="form.expertise.questionPreference" 
              placeholder="例如：喜欢出脑筋急转弯、重逻辑题、偏基础打牢" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 分割线 -->
          <div class="border-t-2 border-gray-300 my-8"></div>

          <!-- 语言风格 / 表达方式 -->
          <h2 class="text-xl font-semibold mb-4 flex items-center">
            <span class="text-2xl mr-2">💬</span>
            五、语言风格 / 表达方式
          </h2>
          
          <!-- 用词风格 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">用词风格</span>
            </label>
            <input 
              type="text" 
              v-model="form.languageStyle.vocabularyStyle" 
              placeholder="例如：青春校园语言、古风、网络梗风格" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 是否使用表情/emoji -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">是否使用表情/emoji</span>
            </label>
            <input 
              type="text" 
              v-model="form.languageStyle.emojiUsage" 
              placeholder="例如：加油哦 💪！、你太棒啦🌟" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 对知识的比喻 -->
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">对知识的比喻</span>
            </label>
            <input 
              type="text" 
              v-model="form.languageStyle.knowledgeMetaphor" 
              placeholder="例如：喜欢用生活类比、用游戏术语" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 分割线 -->
          <div class="border-t-2 border-gray-300 my-8"></div>

          <!-- 交互行为设计 -->
          <h2 class="text-xl font-semibold mb-4 flex items-center">
            <span class="text-2xl mr-2">🤖</span>
            六、交互行为设计
          </h2>
          
          <!-- 用户提问时的回应风格 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">用户提问时的回应风格</span>
            </label>
            <input 
              type="text" 
              v-model="form.interaction.responseStyle" 
              placeholder="例如：你问得真好，这个问题可以这样理解…" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 学习鼓励方式 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">学习鼓励方式</span>
            </label>
            <input 
              type="text" 
              v-model="form.interaction.encouragementStyle" 
              placeholder="例如：打分、送虚拟奖章、语音鼓励" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 应对错误回答的方式 -->
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">应对错误回答的方式</span>
            </label>
            <input 
              type="text" 
              v-model="form.interaction.errorHandling" 
              placeholder="例如：轻柔纠正、引导用户反思、给提示而不直接讲答案" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 分割线 -->
          <div class="border-t-2 border-gray-300 my-8"></div>

          <!-- 视觉形象设定 -->
          <h2 class="text-xl font-semibold mb-4 flex items-center">
            <span class="text-2xl mr-2">🎨</span>
            七、视觉形象设定（可选）
          </h2>
          
          <!-- 发色/发型 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">发色 / 发型</span>
            </label>
            <input 
              type="text" 
              v-model="form.visual.hairStyle" 
              placeholder="例如：黑色长发、粉蓝渐变短发、未来科技风" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 穿搭 -->
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-medium">穿搭</span>
            </label>
            <input 
              type="text" 
              v-model="form.visual.outfit" 
              placeholder="例如：校园制服、运动服、未来战衣" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 配件 -->
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">配件</span>
            </label>
            <input 
              type="text" 
              v-model="form.visual.accessories" 
              placeholder="例如：智能眼镜、手环、背包、书本、宠物" 
              class="input bg-white w-full focus:outline-none focus:ring-2 focus:ring-primary" 
            />
          </div>

          <!-- 分割线 -->
          <div class="border-t-2 border-gray-300 my-8"></div>

          <!-- 自定义特征 -->
          <div class="mt-6">
            <h3 class="text-lg font-semibold mb-4">自定义特征</h3>
            <div v-for="(field, index) in customFields" :key="index" class="mb-4">
              <div class="flex gap-2">
                <input 
                  type="text" 
                  v-model="field.label" 
                  placeholder="名称" 
                  class="input bg-white w-1/3 focus:outline-none focus:ring-2 focus:ring-primary" 
                />
                <input 
                  type="text" 
                  v-model="field.value" 
                  placeholder="内容" 
                  class="input bg-white w-2/3 focus:outline-none focus:ring-2 focus:ring-primary" 
                />
                <button 
                  @click="removeCustomField($event, index)" 
                  class="btn btn-error"
                  type="button"
                >
                  删除
                </button>
              </div>
            </div>
            <button 
              @click="addCustomField($event)" 
              class="btn w-full"
              type="button"
            >
              + 添加自定义特征
            </button>
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="form-control mt-8">
          <button type="submit" class="btn btn-primary w-full">创建虚拟人名片</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const showPassword = ref(false);
const customFields = ref([]);

const form = reactive({
  basicInfo: {
    name: '',
    age: '',
    gender: '',
    appearance: '',
    voiceStyle: ''
  },
  personality: {
    type: '',
    expressionStyle: '',
    attitude: ''
  },
  interests: {
    hobbies: '',
    background: '',
    motto: ''
  },
  expertise: {
    subjects: '',
    teachingStyle: '',
    questionPreference: ''
  },
  languageStyle: {
    vocabularyStyle: '',
    emojiUsage: '',
    knowledgeMetaphor: ''
  },
  interaction: {
    responseStyle: '',
    encouragementStyle: '',
    errorHandling: ''
  },
  visual: {
    hairStyle: '',
    outfit: '',
    accessories: ''
  },
  email: '',
  password: ''
});

const addCustomField = (event) => {
  event.preventDefault();
  customFields.value.push({
    label: '',
    value: ''
  });
};

const removeCustomField = (event, index) => {
  event.preventDefault();
  customFields.value.splice(index, 1);
};

const submitForm = (event) => {
  event.preventDefault();
  
  // 验证必填字段
  const requiredFields = [
    form.basicInfo.name,
    form.basicInfo.age,
    form.basicInfo.gender
  ];

  if (requiredFields.some(field => !field)) {
    alert('请填写姓名、年龄和性别！');
    return;
  }

  // 将自定义字段添加到表单数据中
  const customFieldsData = {};
  customFields.value.forEach(field => {
    if (field.label && field.value) {
      customFieldsData[field.label] = field.value;
    }
  });
  
  const formData = {
    ...form,
    customFields: customFieldsData
  };
  
  console.log('Form submitted:', formData);
  alert('虚拟人名片创建成功！');
};
</script>

<style scoped>
.input {
  height: 48px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 0 16px;
}

.input:focus {
  border-color: transparent;
}

.label-text {
  color: #374151;
  margin-bottom: 8px;
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.5em;
  padding-right: 2.5rem;
}
</style> 